// import table2excel from '../../libs/table2excel.js';
import canEditTable from '../Components/canEditTable.vue';
import validate from '../../libs/validate';


export default {
    // name:'crm-ctrl-user',
    components: {
        canEditTable
    },
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            userColumns: [{
                'title': '序号',
                'align': 'center',
                'type': 'index',
                'width': 70
            }, {
                'title': '昵称',
                'align': 'center',
                'key': 'nickname',

            }, {
                'title': '登录名',
                'align': 'center',
                'key': 'loginid',
            }, {
                'title': '爱豆',
                'align': 'center',
                'key': 'love_beans_num',
            }, {
                'title': '注册时间',
                'align': 'center',
                'key': 'createtime',
            }, {
                title: '操作',
                align: 'center',
                key: 'handle',
                handle: ['delete']
            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            tableData: [],
            modalLoading:true,
            showModal:false,
            addUserModalForm:{
                password:'',
                mobilenum:'',
                nickname:''
            },
            addUserModalFormRules:{
                nickname: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
                mobilenum: [{
                    required: true,
                    validator: validate.cant_empty_tel,
                    trigger: 'blur'
                }],
                password: [{
                    required: false,
                    validator: validate.can_empty_password,
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        doSearch() {
            this.pageNum = 1;
            this.getUserList();
        },
        clearSearch() {
            this.searchKey = '';
            this.pageNum = 1;
            this.getUserList();
        },
        changePage(num) {
            this.pageNum = num;
            this.getUserList();
            document.querySelector('.single-page-con').scrollTo(0, 0)

        },
        getUserList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.getAllUserListUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.tableData = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        export2Excel() {
            // table2excel.transform(this.$refs.usersTable, 'hrefToExportTable', '用户表第' + this.pageNum + '页');
            this.$refs.userTable.$children[0].exportCsv({
                filename: '用户表第' + this.pageNum + '页(请打开后拉宽查看)',
                columns: this.userColumns.filter((col, index) => index >= 1 && index <= 4),
                data: this.tableData.filter((data) => data.key !== 'handle')

            });
        },
        deleteUser(val, index) {
            let onDeleteUser = val[index];
            this.http.post(this.postUrl.deleteAppUseUrl, {
                token: this.user.tokenList[0],
                uuid: val[index].uuid,
            }).then((data) => {
                if (data.code >= 0) {
                    this.$Notice.success({
                        title: '删除成功！',
                    });
                    this.getUserList()
                    onDeleteUser = null;
                } else {
                    this.errorHandle(data.msg)
                    this.tableData.splice(index, 0, onDeleteUser)
                }
            },()=>{
                this.errorHandle()
                this.tableData.splice(index, 0, onDeleteUser)
            })
        },
        submitAddUser(){
            this.changeLoadingStatus(true)
            this.$refs.addUserModalFormForm.validate(valid=>{
                if(!valid){
                    this.changeLoadingStatus(false)
                    return
                }
                this.http.post(this.postUrl.doAddNewUserUrl,{
                    token:this.user.tokenList[0],
                    password:this.addUserModalForm.password,
                    mobilenum:this.addUserModalForm.mobilenum,
                    nickname:this.addUserModalForm.nickname,
                }).then((data)=>{
                    if(data.code > -1){
                        this.$Notice.success({
                            title: '新增成功！'
                        })
                        this.showModal = false;
                        this.getUserList();
                    }else{
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                },()=>{
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })
            })
        }
    },
    created() {
        if (this.user) {
            this.getUserList()
        }
    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.getUserList()
            }
        }
    }
}
